<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-form.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	i = 1;
	j = 1;
	var interval;
	$(document).ready(function(){
         $("#ajaxForm").submit(function () {
        	 
        	 
             $(this).ajaxSubmit(function () {
                 alert("提交成功1");
             });
             
             interval = window.setInterval(function(){getProcess2()},500);
             
             return false;
         });
         $("#btnButton").click(function () {
             $("#ajaxForm").ajaxSubmit(function () {
            	 
            	 alert("上传成功！");
             });
        	 interval = window.setInterval(function(){getProcess()},500);
             return false;
         });
		
		
		
		
	});
function getProcess(){
	
	//获取进度
	$.ajax({
		url:"getUploadProcess",
		type:"get",
		success:function(data){
			var s = parseFloat(data.fileItemAry);
			var e = parseFloat(data.fileItemArys);
			$("#process1").html("进度:"+((s/e)*100).toFixed(2) +"% 文件总数："+data.fileItemCount +"  正在上传第："+ data.fileItem+"个，文件大小："+data.fileItemArys +" 已上传大小："+ data.fileItemAry);
			if(data.fileItemAry==data.fileItemArys){
				window.clearInterval(interval);
			}
		}
	});  
}
function getProcess2(){
	
	//获取进度
	$.ajax({
		url:"getUploadProcess2",
		type:"get",
		success:function(data){
			var s = parseFloat(data.fileItemAry);
			var e = parseFloat(data.fileItemArys);
			$("#process1").html("进度:"+((s/e)*100).toFixed(2) +"% 文件总数："+data.fileItemCount +"  正在上传第："+ data.fileItem+"个，文件大小："+data.fileItemArys +" 已上传大小："+ data.fileItemAry);
			if(data.fileItemAry==data.fileItemArys){
				window.clearInterval(interval);
			}
		}
	});  
}
</script>
</head>
<body>
 	<hr align="left" width="60%" color="#FF0000" size="3">
 	<div>
         <form id="ajaxForm" method="post" action="upload2" enctype="multipart/form-data">
             <input type="text" name="name" />
             <input type="text" name="sex" />
            <input type="file" name="file" />
             <button type="submit" id="btnSubmit">提交1</button>
         </form>
         <button id="btnButton" type="button">提交2</button>
     </div>
     <div>上传进度：</div>
     <div id="process1"></div>
 	
</body>
</html>